
/* 通用选项卡 */
$(".common-title .tab-title").mouseenter(function () {

    $(this).addClass("active").siblings().removeClass("active")
        .closest(".common-title")
        .siblings(".content").find(".con-item").eq($(this).index())
        .addClass("current").siblings().removeClass("current")
})

//文档加载事件
$(function () {
    //调用轮播函数,实现banner区域
    lunbo("#banner",400,990,420,10,20,20,20);

    function lunbo(selector,boxh,imgw,imgh,controlsW,controlsH,radius) {
        $(selector ).slidebox(
            {
                boxh: boxh||420,//盒子的高度
                w: imgw||1000,//图片的宽度
                h: imgh||420,//图片的高度
                isShow: true,//是否显示控制器
                isShowBtn: true,//是否显示左右按钮
                controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                controlsW: controlsW||20,//控制按钮宽度
                controlsH: controlsH||10,//控制按钮高度
                radius: radius||10//控制按钮圆角度数
            }
        );
    }
    /* 选项卡效果 */
    $(".common-title .tab-title").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active")
            .closest(".common-title")
            .siblings(".content").find(".con-item").eq($(this).index())
            .addClass("current").siblings().removeClass("current")
    })

/* 楼层导航  */
    //  颜色数组
    let colorArr = ["#93D46F", "#F65828", "#BB9DEE", "#FF7394", "#C2EC52"]

    $(".floor-nav .nav-item").hover(function () {
        let index = $(this).index()//事件源的索引
        //鼠标移入
        $(this).css(
            {
                "background-position-x": "-40px",
                "background-color": colorArr[index],
                "width": 40
            }
        )
    }, function () {  //鼠标移出

        $(this).css(
            {
                "background-position-x": 0,
                "background-color": "",
                "width": 0
            }
        )

    }).click(function () {
        let index = $(this).index()//事件源的索引
        let $target = $(".floor").eq(index)//找到与之对应的滚动区域
        let sTop = $target.offset().top  //获取到该区域距离文档顶部的距离
        $("html,body").stop().animate({ scrollTop: sTop }, 300)  //有动画效果
    })

    /* 图书电子书 ---排行榜 
       自己携带类名  active
       其它li移除类名 active
    */
    $(".ebook-rank .rank-item").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $(".book-rank .rank-item").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    /* 窗口的滚动事件 */
    $(window).scroll(function () {
        let sTop = $("html,body").scrollTop() //获取文档卷动的距离、
        console.log("sTop", sTop);
        if (sTop >= 500) {
            //显示顶部搜索框
            $(".topsearch").stop().slideDown()
            //  把头部的搜索框借过来用一下。
            $(".searchBar").appendTo(".topsearch .container")
        } else {
            //隐藏顶部搜索框
            $(".topsearch").stop().slideUp()
            //  把头部的搜索框还回去。
            $(".searchBar").appendTo(".hc_head")
        }
    })

    //独家提供区域轮播
lunbo(".provide-slider", 532, 1200, 532);
/* 重置小盒子中的图片大小 */
$(".provide .content .con-item  .provide-item img").css({ width: 150, height: 150 })

/* 换一批 
 
  1 给按钮写点击事件
  2 当点击事件发生之后：
        事件处理函数： 要实现三个盒子的轮流显示。
     原理：
         移动类名current   的位置
        可以定义一个变量来表示携带类名的这个盒子的索引,索引从0开始
        let index = 0;
        点击1次之后，要显示第二个盒子，第二个盒子的索引是1
          index +=1;   ==>1
        点击2次之后，要显示第三个盒子，第三个盒子的索引是2
          index +=1;   ==> 2
        点击3次之后，要显示第1个盒子，第1个盒子的索引是0
           index = 0;  == >此时index为3 ，要改 0

*/
let index = 0;
$("#changeBtn").click(function () {
    index += 1;
    console.log("index:", index);
    if (index == 6) {
        index = 0
    }
    $(".guess .con-item").eq(index).addClass("current").siblings().removeClass("current")
})
})
window.addEventListener('load', function () {
let f_gotop = document.querySelector('#f_gotop')
window.addEventListener('scroll', function () {
    //滚动距离
    let sTop = document.documentElement.scrollTop
    //判断
    if (sTop >= 600) {
        f_gotop.style.display = 'block'
    } else {
        f_gotop.style.display = 'none'
    }
})

f_gotop.addEventListener('click', function () {
    let t = 1000;//ms//定义运动总时间
    let s = document.documentElement.scrollTop//获取当前的总路程
    let v = s / t;//速度
    //开启计时器
    let timeId = setInterval(function () {
        let sTop = document.documentElement.scrollTop//每30毫秒的初始滚动距离
        document.documentElement.scrollTop = sTop - 30 * v//减去滚动路程
        if (sTop <= 0) {//判断
            clearInterval(timeId)
        }
    }, 30)
})
})
/* 
   selector:选择器
   boxh:盒子的高度
   imgw:图片的宽度
   imgh:图片的高度
   controlsW:控制按钮宽度
   controlsH: 控制按钮高度
   radius:控制按钮圆角度数
*/
function lunbo(selector, boxh, imgw, imgh, controlsW, controlsH, radius) {
    // console.log(selector);
    // console.log(boxh);
    // console.log(imgw);
    // console.log(imgh);
    // console.log(controlsW);
    // console.log(controlsH);
    // console.log(radius);
    $(selector).slidebox(
        {
            boxh: boxh || 420,//盒子的高度
            w: imgw || 1000,//图片的宽度
            h: imgh || 420,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: controlsW || 20,//控制按钮宽度
            controlsH: controlsH || 10,//控制按钮高度
            radius: radius || 0//控制按钮圆角度数
        }
    );
}
/* 重置小盒子中的图片大小 */
$(".provide .content .con-item  .provide-item img").css({ width: 150, height: 150 })


/* 放大镜 */
$(function () {

    var magnifierConfig = {
        magnifier: "#magnifier1",//最外层的大容器
        width: 340,//承载容器宽
        height: 410,//承载容器高
        moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
        zoom: 5//缩放比例
    };

    var _magnifier = magnifier(magnifierConfig);

    /*magnifier的内置函数调用*/
    /*
        //设置magnifier函数的index属性
        _magnifier.setIndex(1);

        //重新载入主图,根据magnifier函数的index属性
        _magnifier.eqImg();
    */


        //给当前菜单添加激活样式
    $('.dr_meun li').mouseover(function () {
        $(this).addClass('active').siblings().removeClass('active')
    //当前菜单索引
            let index = $(this).index()
    //显示当前菜单对应内容
    $('#dr_content div').eq(index).addClass('on').siblings().removeClass('on')
        })

        $('.tm_ul li').mouseover(function () {
            $(this).addClass('active').siblings().removeClass('active')
        //当前菜单索引
                let index = $(this).index()
        //显示当前菜单对应内容
        $('.tm_box div').eq(index).addClass('on').siblings().removeClass('on')
            })


            $(function () {
                /* 
                  1 计算数量
                  2 计算小计金额
                  3 计算选中商品的总数量 
                */
            
                //增加数量
                $(".plus").click(function () {
                    //获取文本框中的值(数量)
                    let num = $(this).prev().val();
                    //递增
                    // num = window.parseInt(num) + 1;
                    // num++  // 可以进行类型转换
                    // ++num //可以进行类型转换
                    num++;
                    //把值赋回页面
                    $(this).prev().val(num);
                    // console.log(num);
                    //获取单价
                    let price = $(this).closest("li").siblings(".list_price").find("span").text();
                    //计算小计金额
                    let subtotal = num * price;
                    //把金额显示在页面上
                    $(this).closest("li").siblings(".list_sum").find("span").text(subtotal.toFixed(2));
                    // console.log("单价", price, "小计", subtotal);
                    //计算选中商品的数量和金额
                    calcCountPrice()
            
                })
                //减少数量
                $(".reduce").click(function () {
                    //获取文本框中的值(数量)
                    let num = $(this).next().val();
                    //递减  
                    num--;
                    if (num < 1) {
                        num = 1;
                    }
                    //把值赋回页面
                    $(this).next().val(num);
                    // console.log(num);
            
                    //获取单价
                    let price = $(this).closest("li").siblings(".list_price").find("span").text();
                    //计算小计金额
                    let subtotal = num * price;
                    //把金额显示在页面上
                    $(this).closest("li").siblings(".list_sum").find("span").text(subtotal.toFixed(2));
                    // console.log("单价", price, "小计", subtotal);
                    //计算选中商品的数量和金额
                    calcCountPrice()
                })
                // 单选框的点击事件[点击事件或者改变事件都可以]
                /* 
                   思路：
                      当事件发生后：
                          1 获取选中的商品，遍历每个商品取出对应的数量进行累加。 
                          2 获取选中子项目的个数，以及子项目的总个数，
                            比较两个数量，如果相等就全选，否则就取消全选
                */
                $(".son_check").click(function () {
                    // $(this).prop("checked")
                    isAllSelect();
                    //    计算选中商品的数量和金额
                    calcCountPrice()
                })
                /* 是否全选 */
                function isAllSelect() {
                    // 1获取选中子项目的个数
                    let selNum = $(".son_check:checked").length;
                    //2 子项目的总个数
                    let count = $(".son_check").length;
                    console.log("选中的个数", selNum, "总数", count);
                    if (selNum === count) {
                        $(".all_check").prop("checked", true);
                    } else {
                        $(".all_check").prop("checked", false);
                    }
                }
                /*
                  顶部的全选框:
                  用自己的状态决定子项目的状态 
                 */
                $(".all_check").click(function () {
                    //获取自己的状态
                    let bool = $(this).prop("checked");
                    // console.log(bool);
                    //把自己的状态赋给子项目
                    $(".son_check").prop("checked", bool);
                    // 计算选中商品的数量和金额
                    calcCountPrice()
            
                })
            
                /* 删除所有选中商品
                  思路：
                   1 找到所有的选中商品，调用 remove()方法
                   2  取消全选
                */
                $(".delallsel").click(function () {
                    // alert(666)
                    if (window.confirm("确定要删除吗？")) {
                        $(".son_check:checked").closest("ul").remove();
                        // 计算选中商品的数量和金额
                        calcCountPrice()
                        //取消全选
                        //获取内容区域的子元素，
                        let len = $(".order_content").children().length;
                        // 如果没有子元素，就取消全选。
                        if (len === 0) {
                            $(".all_check").prop("checked", false);
                        }
            
                    }
            
                    console.log($(".order_content").children().length);
                })
            
                /* 删除当前行
                   思路： 
                    1  向上查找，找到ul ，直接删除。
                    2  计算选中商品的数量和金额
                    3  是否全选
                */
                $(".delbtn").click(function () {
                    if (window.confirm("确定要删除吗？")) {
            
                        $(this).closest("ul").remove();
                        //计算选中商品的数量和金额
                        calcCountPrice();
                        //是否全选
                        isAllSelect();
                        //获取内容区域的子元素，
                        let len = $(".order_content").children().length;
                        // 如果没有子元素，就取消全选。
                        if (len === 0) {
                            $(".all_check").prop("checked", false);
                        }
            
            
                    }
                })
            
                /* 计算选中商品的数量和金额 */
                function calcCountPrice() {
                    let count = 0;//总的选中的商品数量
                    let total = 0.00;//总金额
                    // 1 获取选中的商品
                    $(".son_check:checked").each(function (i, v) {
                        // console.log(i, v, this);
                        //1 计算数量 
                        //取出对应的数量
                        let num = $(v).parent().siblings(".list_amount").find(".sum").val();
                        count += window.parseInt(num);
                        // console.log("取出对应的数量", num,"总数",count);、
                        //2 计算总金额
                        let subTotal = $(this).parent().siblings(".list_sum").find("span").text();
                        // console.log("小计金额:",subTotal);
                        total += window.parseFloat(subTotal);
                    })
                    //把数量显示在页面上
                    $(".amount").text(count)
                    //把总金额显示在页面上
                    $(".totalprice").text(total)
                }
            
            })
});